{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@jqgird_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <script>
        var agentSec = 5000,agentId = 0;
        var queSec = 5000, queId = 0;
        var callSec = 5000, callId = 0;
    </script>
    <div class="col-sm-12 widget-container-col ui-sortable">
        <div class="widget-box" style="opacity: 1; z-index: 0;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title smaller">系统监控</h5>
                <!-- #section:custom/widget-box.tabbed -->
                <div class="widget-toolbar no-border">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active">
                            <a data-toggle="tab" href="#bar">{{ 'The bar chart'|trans }}</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#pie" onclick="javascript:swftype = 2;setTimeout(function(){updateChart(2);},1);">{{ 'The pie chart'|trans }}</a>
                        </li>
                        <li>
                            <button class="btn btn-xs bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                                <span id="btnSecond">每10秒刷新</span>
                                <i class="ace-icon fa fa-chevron-down icon-on-right"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-yellow dropdown-menu-right dropdown-caret">
                                <li>
                                    <a href="#" onclick="switchRefresh(5000, this)">每5秒刷新</a>
                                    <a href="#" onclick="switchRefresh(10000, this)">每10秒刷新</a>
                                    <a href="#" onclick="switchRefresh(15000, this)">每15秒刷新</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /section:custom/widget-box.tabbed -->
            </div>
            <div class="widget-body">
                <div class="widget-main padding-6">
                    <div class="tab-content">
                        <div id="bar" class="tab-pane active" style="width: 100%;height: 400px;">

                        </div>
                        <div id="pie" class="tab-pane" style="width: 600px;height: 400px;">

                        </div>
                        <div class="col-xs-12 col-sm-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h5 class="widget-title smaller">坐席监控</h5>
                                    <!-- #section:custom/widget-box.tabbed -->
                                    <div class="widget-toolbar no-border">
                                        <ul class="nav nav-tabs">
                                            <li>
                                                <button class="btn btn-xs bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                                                    <span id="agentBtnSecond">每5秒刷新</span>
                                                    <i class="ace-icon fa fa-chevron-down icon-on-right"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-yellow dropdown-menu-right dropdown-caret">
                                                    <li>
                                                        <a href="#" onclick="agenthRefresh(5000, this)">每5秒刷新</a>
                                                        <a href="#" onclick="agenthRefresh(10000, this)">每10秒刷新</a>
                                                        <a href="#" onclick="agenthRefresh(15000, this)">每15秒刷新</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- /section:custom/widget-box.tabbed -->
                                </div>
                                <div class="widget-body">
                                    <div class="widget-main padding-6">
                                        <div class="tab-content" id="agent-content">
                                            <div>
                                                <form id="searchForm">
                                                    <input type="text" id="keyword" class="col-xs-12 col-sm-4">
                                                    <button id="loading-btn" type="button" class="btn btn-info btn-sm" data-loading-text="Loading...">
                                                        <i class="ace-icon fa fa-search"></i>查询
                                                    </button>
                                                </form>
                                            </div>
                                            <table id="agentTable"></table>
                                            <table id="agentPage"></table>
                                        </div>
                                    </div>
                                 </div>
                            </div>

                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h5 class="widget-title smaller">技能组监控</h5>
                                    <!-- #section:custom/widget-box.tabbed -->
                                    <div class="widget-toolbar no-border">
                                        <ul class="nav nav-tabs">
                                            <li>
                                                <button class="btn btn-xs bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                                                    <span id="queBtnSecond">每5秒刷新</span>
                                                    <i class="ace-icon fa fa-chevron-down icon-on-right"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-yellow dropdown-menu-right dropdown-caret">
                                                    <li>
                                                        <a href="#" onclick="queRefresh(5000, this)">每5秒刷新</a>
                                                        <a href="#" onclick="queRefresh(10000, this)">每10秒刷新</a>
                                                        <a href="#" onclick="queRefresh(15000, this)">每15秒刷新</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- /section:custom/widget-box.tabbed -->
                                </div>
                                <div class="widget-body">
                                    <div class="widget-main padding-6">
                                        <div class="tab-content">
                                            <table id="queTable"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h5 class="widget-title smaller">排队电话监控</h5>
                                    <!-- #section:custom/widget-box.tabbed -->
                                    <div class="widget-toolbar no-border">
                                        <ul class="nav nav-tabs">
                                            <li>
                                                <button class="btn btn-xs bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                                                    <span id="callBtnSecond">每5秒刷新</span>
                                                    <i class="ace-icon fa fa-chevron-down icon-on-right"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-yellow dropdown-menu-right dropdown-caret">
                                                    <li>
                                                        <a href="#" onclick="callRefresh(5000, this)">每5秒刷新</a>
                                                        <a href="#" onclick="callRefresh(10000, this)">每10秒刷新</a>
                                                        <a href="#" onclick="callRefresh(15000, this)">每15秒刷新</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- /section:custom/widget-box.tabbed -->
                                </div>
                                <div class="widget-body">
                                    <div class="widget-main padding-6">
                                        <div class="tab-content">
                                            <table id="callTable"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="clear: both"></div>
                    </div>
                </div>
            </div>
            <div id="message"></div>
        </div>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@chart_js'
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    '@jquery_ui_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        var swftype =1,swfsec = 10000,swfid = "", myChart = {},option={};
        var myBar = echarts.init(document.getElementById('bar'));
        var myPie = echarts.init(document.getElementById('pie'));
        var option_bar = {
            title : {
                text: '系统信息监控',
                x:'center',
                y:'bottom'
            },
            animation:false,
            tooltip : {
                show:true
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['排队','振铃','通话','整理','就绪','置忙']
                }
            ],
            yAxis : [
                {
                    name:'个数',
                    type : 'value',
                    splitArea:{show:true}
                }
            ],
            series : [
                {
                    type:'bar',
                    barWidth:80,
                    data:[
                        {value:0,itemStyle:{normal:{color:'#98BAD4',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#E6C359',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#9FBD47',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#E59968',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#268E8E',label:{show:true,textStyle:{fontSize:18}}}}},
                        {value:0,itemStyle:{normal:{color:'#C86565',label:{show:true,textStyle:{fontSize:18}}}}}
                    ]
                }
            ]
        };
        var option_pie = {
            title : {
                text: '系统信息监控',
                x:'center',
                y:'bottom'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            animation:false,
            calculable : true,
            series : [
                {
                    name:'个数',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:0, name:'排队',itemStyle:{normal:{color:'#98BAD4',label:{position:'outer',formatter:"{b}  {c}"}}}},
                        {value:0, name:'振铃',itemStyle:{normal:{color:'#E6C359',label:{position:'outer',formatter:"{b}  {c}"}}}},
                        {value:0, name:'通话',itemStyle:{normal:{color:'#9FBD47',label:{position:'outer',formatter:"{b}  {c}"}}}},
                        {value:0, name:'整理',itemStyle:{normal:{color:'#E59968',label:{position:'outer',formatter:"{b}  {c}"}}}},
                        {value:0, name:'就绪',itemStyle:{normal:{color:'#268E8E',label:{position:'outer',formatter:"{b}  {c}"}}}},
                        {value:0, name:'置忙',itemStyle:{normal:{color:'#C86565',label:{position:'outer',formatter:"{b}  {c}"}}}}
                    ]
                }
            ]
        };

        $(document).ready(function() {
//            $("#bar").css('height',$(document).height()-50);
//            $("#bar").css('width',$(document).width()-50);
//            $("#pie").css('height',$(document).height()-50);
            updateChart(1);
            swfid = window.setInterval(function(){updateChart(swftype);},swfsec);
        });

        function updateChart(type)
        {
            $.ajax({
                type:"POST",
                url:'{{ path('icsoc_monitor_system_monitor_data') }}',
                dataType:'json',
                async:false,
                success:function (responce){
                    if(responce['error']=='0'){
                        if(type == 1)
                        {
                            option_bar.series[0].data[0].value = responce['content']['queue_nums'];
                            option_bar.series[0].data[1].value = responce['content']['ring_nums'];
                            option_bar.series[0].data[2].value = responce['content']['call_nums'];
                            option_bar.series[0].data[3].value = responce['content']['wait_nums'];
                            option_bar.series[0].data[4].value = responce['content']['ready_nums'];
                            option_bar.series[0].data[5].value = responce['content']['busy_nums'];
                        }
                        else
                        {
                            if(responce['content']['max'] ==0) {
                                $("#message").html("<h2 style='color:red'>没有数据显示</h2>");
                            } else {
                                $("#message").html("");
                            }
                            option_pie.series[0].data[0].value = responce['content']['queue_nums'];
                            option_pie.series[0].data[1].value = responce['content']['ring_nums'];
                            option_pie.series[0].data[2].value = responce['content']['call_nums'];
                            option_pie.series[0].data[3].value = responce['content']['wait_nums'];
                            option_pie.series[0].data[4].value = responce['content']['ready_nums'];
                            option_pie.series[0].data[5].value = responce['content']['busy_nums'];
                        }
                        myBar.setOption(option_bar);
                        myPie.setOption(option_pie);
                    }
                    else
                    {
                        gritterAlert("{{ 'Prompt'|trans }}", responce['message'], 'info');
                    }
                },
                error : function(){
                    window.parent.location.href = "{{ path('icsoc_security_login') }}"
                }
            });
        }

        function switchRefresh(second, obj)
        {
            $("#btnSecond").text($(obj).text());
            swfsec = second;
            clearInterval(swfid);
            swfid=setInterval(function(){updateChart(swftype);},swfsec);
        }
        /**
         * 坐席监控刷新；
         */
        function agenthRefresh(second, obj)
        {
            $("#agentBtnSecond").text($(obj).text());
            agentSec = second;
            clearInterval(agentId);
            agentId = setInterval(function(){$('#agentTable').trigger('reloadGrid');},agentSec);
        }

        /**
         * 技能组监控刷新；
         */
        function queRefresh(second, obj)
        {
            $("#queBtnSecond").text($(obj).text());
            queSec = second;
            clearInterval(queId);
            agentId=window.setInterval(function(){$('#queTable').trigger('reloadGrid')},queSec);
        }

        /**
         * 排队监控监控刷新；
         */
        function callRefresh(second, obj)
        {
            $("#callBtnSecond").text($(obj).text());
            callSec = second;
            clearInterval(callId);
            callId=window.setInterval(function(){$('#callTable').trigger('reloadGrid')},callSec);
        }

        /**
         * 坐席监控
         */
        jQuery(function($) {
            var pager_selector = '#agentPage';
            var grid_selector = '#agentTable';
            $(window).on('resize.jqGrid', function () {
                $('#agentTable').jqGrid( 'setGridWidth', $("#agent-content").width() );
            });
            jQuery("#agentTable").jqGrid({
                url: "{{ path('icsoc_monitor_system_agent_list_data') }}",  //数据；
                mtype: 'POST',
                colNames:[
                    {% for name in agentTable %}
                        '{{ name|trans }}'{% if not loop.last %},{% endif %}
                    {% endfor %}
                ],
                colModel:[
                    {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,formatter:function(cell,opt,row){
                        var str = "<a title='强制退出' href='javascript:void(0);' onclick='agent_operate("+row.ag_id+",4)'><i class='fa fa-sign-out'></i></a>";
                        if (row.ag_sta == 1) {
                            str+="&nbsp;&nbsp;<a title='强制置忙' href='javascript:void(0);' onclick='agent_operate("+row.ag_id+",6)'><i class='fa fa-user'></i></a>";
                        }
                        if (row.ag_sta == 2) {
                            str+="&nbsp;&nbsp;<a title='强制置闲' href='javascript:void(0);' onclick='agent_operate("+row.ag_id+",5)'><i class='fa fa-user'></i></a>";
                        }
                        return str;
                    }},
                    {name:'ag_name',index:'ag_name',width:100,fixed:true, editable:true, sortable:false,formatter:function(cell,opt,row){
                        return row.ag_name + ' ' + row.ag_num;
                    }},
                    {name:'pho_num',index:'pho_num',width:100,fixed:true, editable:true, sortable:false},
                    {name:'que_name',index:'que_name',width:100,fixed:true, editable:true, sortable:false, formatter:function(cell,opt,rowData){
                        return "<div title='"+rowData.all_que_name+"'>"+rowData.que_name+"</div>";
                    }},
                    {name:'pho_sta_callque',index:'pho_sta_callque',width:100,fixed:true, editable:true, sortable:false},
                    {name:'pho_sta_calltype',index:'pho_sta_calltype',width:100,fixed:true, editable:true, sortable:false},
                    {name:'login_ip',index:'login_ip',width:100,fixed:true, editable:true, sortable:false},
                    {name:'status',index:'status',width:100,fixed:true, editable:true, sortable:false},
                    {name:'status_secs',index:'status_secs',width:100,fixed:true, editable:true, sortable:false,formatter:function(val,opt,row){
                        return formate_time(val);
                    }},
                    {name:'secs_login',index:'secs_login',width:100,fixed:true, editable:true, sortable:false,formatter:function(val,opt,row){
                        return formate_time(val);
                    }},
                    {name:'secs_ready',index:'secs_ready',width:100,fixed:true, editable:true, sortable:false,formatter:function(val,opt,row){
                        return formate_time(val);
                    }},
                    {name:'secs_busy',index:'secs_busy',width:100,fixed:true, editable:true, sortable:false,formatter:function(val,opt,row){
                        return formate_time(val);
                    }},
                    {name:'secs_call',index:'secs_call',width:100,fixed:true, editable:true, sortable:false,formatter:function(val,opt,row){
                        return formate_time(val);
                    }},
                    {name:'secs_ring',index:'secs_ring',width:100,fixed:true, editable:true, sortable:false,formatter:function(val,opt,row){
                        return formate_time(val);
                    }},
                    {name:'secs_wait',index:'secs_wait',width:100,fixed:true, editable:true, sortable:false,formatter:function(val,opt,row){
                        return formate_time(val);
                    }},
                ],
                {{ gridConfig() }}
                pager:'#agentPage',
                multiselect:false
            });
            {{ gridNav(false,false,false,false,false,false,false,false) }}
            agentId = window.setInterval(function(){$('#agentTable').trigger('reloadGrid');},5000);
        });

        /**
         * 技能组监控
         */
        jQuery(function($) {
            var pager_selector = '';
            var grid_selector = '#queTable';
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid( 'setGridWidth', $("#agent-content").width() );
            });
            jQuery("#queTable").jqGrid({
                url: "{{ path('icsoc_monitor_system_que_list_data') }}",  //数据；
                mtype: 'POST',
                datatype: "json", //从服务器端返回的数据类型，默认xml：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
                height: '100%', //展示高度；
                colNames:[
                    {% for name in queTable %}
                    '{{ name|trans }}'{% if not loop.last %},{% endif %}
                    {% endfor %}
                ],
                colModel:[
                    {name:'que_name',index:'que_name', width:80, fixed:true, sortable:false, resize:false},
                    {name:'online',index:'online',width:100,fixed:true, editable:true, sortable:false},
                    {name:'queue',index:'queue',width:100,fixed:true, editable:true, sortable:false},
                    {name:'ring',index:'ring',width:100,fixed:true, editable:true, sortable:false},
                    {name:'call',index:'call',width:100,fixed:true, editable:true, sortable:false},
                    {name:'rest',index:'rest',width:100,fixed:true, editable:true, sortable:false},
                    {name:'ready',index:'ready',width:100,fixed:true, editable:true, sortable:false},
                    {name:'busy',index:'busy',width:100,fixed:true, editable:true, sortable:false},
                    {name:'queagent',index:'queagent',width:100,fixed:true,align:'center',editable:true, sortable:false,formatter:function(value,opt,row){
                        return "<a href='###' onclick='toMonitorAgent("+row.que_id+")'><i class='fa fa-search'><i></a>";
                    }},
                ],
                {{ gridConfig(1,1000) }}
                multiselect:false
            });
            {{ gridNav(false,false,true,false,true,true,false,false) }}
            queId = window.setInterval(function(){$('#queTable').trigger('reloadGrid');},5000);
        });

        /**
         * 排队电话监控
         */
        jQuery(function($) {
            var pager_selector = '';
            var grid_selector = '#callTable';
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid( 'setGridWidth', $("#agent-content").width() );
            });
            jQuery("#callTable").jqGrid({
                url: "{{ path('icsoc_monitor_system_call_list_data') }}",  //数据；
                mtype: 'POST',
                datatype: "json", //从服务器端返回的数据类型，默认xml：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
                height: '100%', //展示高度；
                colNames:[
                    {% for name in callTable %}
                    '{{ name|trans }}'{% if not loop.last %},{% endif %}
                    {% endfor %}
                ],
                colModel:[
                    {name:'que_name',index:'que_name', width:80, fixed:true, sortable:false, resize:false},
                    {name:'queuer_num',index:'queuer_num',width:100,fixed:true, editable:true, sortable:false},
                    {name:'in_time',index:'in_time',width:150,fixed:true, editable:true, sortable:false},
                    {name:'queuer_sta',index:'queuer_sta',width:100,fixed:true, editable:true, sortable:false},
                    {name:'in_secs',index:'in_secs',width:100,fixed:true, editable:true, sortable:false},
                ],
                {{ gridConfig() }}
                multiselect:false
            });
            {{ gridNav(false,false,true,false,true,true,false,false) }}
            callId = window.setInterval(function(){$('#callTable').trigger('reloadGrid');},5000);
        });
        function formate_time($dur)
        {
            if($dur < 0)
            {
                return '';
            }
            else
            {
                $hour   = parseInt($dur/3600);
                $dur    = $dur%3600;
                $minute = parseInt($dur/60);
                $second = $dur%60;
                if($hour < 10)
                {
                    $hour = "0"+$hour;
                }
                if($minute < 10)
                {
                    $minute = "0"+$minute;
                }
                if($second < 10)
                {
                    $second = "0"+$second;
                }
                $format_dur = $hour+":"+$minute+":"+$second;
                return $format_dur;
            }
        }
        /**
         * 坐席登录状态操作
         */
        function agent_operate(ag_id,code)
        {
            $.ajax({
                url:"{{ path('icsoc_monitor_system_agent_opr') }}",
                data:{"ag_id":ag_id,code:code},
                type:"post",
                dataType:'json',
                success:function(responce){
                    if(responce.err == 0)
                    {
                        $('#agentTable').trigger('reloadGrid');
                    } else {
                        gritterAlert('{{ 'Prompt'|trans }}',responce.msg,'error');
                    }
                }
            });
        }

        function toMonitorAgent(que_id)
        {
//            $('.accordion-toggle').attr('class','accordion-toggle collapsed');
//            $('.panel-collapse').attr('class','panel-collapse collapse');
//            $('#collapseOne').attr('class','panel-collapse in');
//            $('#agent-monitor').attr('class', 'accordion-toggle ');
//            $('#collapseOne').attr('style','height: auto;');
            $('#agentTable').setGridParam({postData:{'que_id':que_id}}).trigger('reloadGrid');
        }

        $( "#accordion" ).accordion({
            collapsible: true ,
            heightStyle: "content",
            animate: 250,
            header: ".accordion-header",
            beforeActivate: function( event, ui ) {}
        }).sortable({
                    axis: "y",
                    handle: ".accordion-header",
                    stop: function( event, ui ) {
                        // IE doesn't register the blur when sorting
                        // so trigger focusout handlers to remove .ui-state-focus
                        ui.item.children( ".accordion-header" ).triggerHandler( "focusout" );
                    }
                });
        jQuery(function($) {
            $('#loading-btn').on(ace.click_event, btnSerach);
            $('#searchForm').on('submit', btnSerach);
        });
        function btnSerach(){
            //可以开始获取值进行查询
            var keyword = $('#keyword').val();
            var filter = new Object();
            filter.keyword = keyword;
            var str = jsonToString(filter);
            var arr = {'fliter':str};
            $('#agentTable').setGridParam({postData:arr}).trigger("reloadGrid");
            return false;
        }
    </script>
{% endblock %}